p {
    color: black;
    background-color: #eeeeee;
}

pre {
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    *white-space: normal !important;
}

pre {
    width: 100%;
    margin: 10px 0px 10px 0px;
    padding: 10px 0px 10px 0px;
    border: 1px dotted #785;
    background: #f5f5f5;
}

/* 第一部分 */

.checked input:checked {
    height: 50px;
    width: 50px;
}

.focus input:focus {
    background-color: yellow;
}

.enabled input:enabled {
    background-color: red;
}

.enabled input:disabled {
    background-color: blue;
}

.range input:in-range {
    border:2px solid blue;
}
.range input:out-of-range {
    border:2px solid red;
}

.invalid input:valid {
    border:2px solid blue;
}

.invalid input:invalid {
    border:2px solid red;
}

.optional input:optional {
    border:2px solid blue;
}

.optional input:required {
    border:2px solid red;
}

.read input:read-write {
    border:2px solid blue;
}

.read input:read-only {
    border:2px solid red;
}
/* 第二部分 */
.empty p:empty {
    background-color: yellow;
    height: 10px;
    width: 100px;
}

.empty span:only-of-type {
    color: blue;
}
.empty span:only-child {
    background-color: red;
}


.first p:first-of-type {
    color: blue;
}
.first p:last-of-type {
    color: red;
}

.first p:first-child {
    background-color: green;
}
.first p:last-child {
    background-color: yellow;
}

.before p:before
{ 
	content:"Read this -";
	background-color:yellow;
	color:red;
	font-weight:bold;
}


.before p::after
{ 
	content:" - And Thank you.";
	background-color:green;
	color:blue;
	font-weight:bold;
}
/* 第三部分 */
.link a:link {
    background-color: yellow;
}
.link a:active {
    background-color: red;
}

.link a:hover {
    background-color: blue;
}

.link a:visited {
    background-color: green;
}


/* 第四部分 */
.target :target
{
	border: 2px solid #D4D4D4;
	background-color: #e5eecc;
}

